<template>
  <div>
      <div class="nav_date" @click="showTimePicker">
          <a href="javascript:;">2018-11-19 <i :style="down_icon"></i> </a>
      </div>
      <div class="wrapper">
          <div class="listfl border-bottom-1px">
              <div class="list_wp">
                  <div class="touxiang">
                      <img :src="userimg" alt="">
                  </div>
                  <div class="content_right">
                      <div class="top">
                          <p class="user_name">1点点(海航城店)</p>
                          <p class="jifen"><em>+</em> 90</p>
                      </div>
                      <p class="info">流水收入</p>
                      <p class="date_p">11-07 15:23</p>
                  </div>
              </div>
          </div>
          <div class="listfl border-bottom-1px">
              <div class="list_wp">
                  <div class="touxiang">
                      <img :src="userimg" alt="">
                  </div>
                  <div class="content_right">
                      <div class="top">
                          <p class="user_name">1点点(海航城店)</p>
                          <p class="jifen"><em>+</em> 90</p>
                      </div>
                      <p class="info">流水收入</p>
                      <p class="date_p">11-07 15:23</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import userimg from '@/assets/lingyi_logo@2x.png'
export default {
    data(){
        return{
            down_icon:{
                backgroundImage: "url(" + require("../../assets/down_icon@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            userimg:userimg
        }
    },
    methods:{
        showTimePicker() {
             if (!this.timePicker) {
               this.timePicker = this.$createDatePicker({
                 title: 'Time Picker',
                 min: [8, 0, 0],
                 max: [20, 59, 59],
                 value: new Date(),
                 startColumn: 'hour',
                 onSelect: this.selectHandle,
                 onCancel: this.cancelHandle
               })
             }

             this.timePicker.show()
           },
           selectHandle(date, selectedVal, selectedText) {
             this.$createDialog({
               type: 'warn',
               content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
               icon: 'cubeic-alert'
             }).show()
           },
           cancelHandle() {
             this.$createToast({
               type: 'correct',
               txt: 'Picker canceled',
               time: 1000
             }).show()
           }
    }
}
</script>
<style scoped>
.nav_date{
    padding:.56rem 0 0 .64rem;
    text-align: left;
}
.nav_date > a{
    font-size: .52rem;
    color: #272727;
    position: relative;
}
.nav_date > a > i{
    content: "";
    display: block;
    width: .44rem;
    height: .28rem;
    position: absolute;
    right: -.6rem;
    top: 50%;
    transform: translate(0,-50%);
}
.wrapper{
    padding: 0 .64rem;
}
.wrapper .listfl{
    height:3.96rem;
    padding: .8rem .52rem .64rem .52rem;
    -moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
    box-sizing:border-box;
}
.wrapper .listfl .list_wp{
    height: 100%;
    display: flex;
}
.wrapper .listfl .touxiang{
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
}
.wrapper .listfl .touxiang img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.wrapper .listfl .content_right{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: .56rem;
}
.wrapper .listfl .content_right .top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.wrapper .listfl .content_right .top .user_name{
    font-size: .56rem;
    color: #363636;
    font-weight: 600;
}
.wrapper .listfl .content_right .top .jifen{
    font-size: .7rem;
    color: #272727;
    font-weight: bold;
}
.wrapper .listfl .content_right .top .jifen > em{
    font-size: .6rem;
}
.wrapper .listfl .content_right .info{
    font-size: .44rem;
    color: #333333;
    text-align: left;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
.wrapper .listfl .content_right .date_p{
    font-size: .44rem;
    color: #999999;
    text-align: left;
}

</style>
